<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="common/include_tag.jsp" %>
<%@ include file="common/page_var.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%=pageTitle%>-用户注册</title>

	<link rel="stylesheet" type="text/css" href="<s:url value='/css/common_green.css'/>" />
	
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="<s:url value='/js/common.js'/>"></script>
<!--     <link rel="stylesheet" href="css/validationEngine.jquery.css"type="text/css"/>
    <script src="js/jquery.validationEngine.js" type="text/javascript"charset="utf-8"></script>
    <script src="js/jquery.validationEngine-zh_CN.js"type="text/javascript" charset="utf-8"></script>
 -->

	<style type="text/css">
		.update{margin:0 auto; padding:0; width:98%;}
		.update td{margin:0; height:30px; padding:5px;}
		.update .name{text-align:right;}
		.title_div{width:350px;}
		
		body {
		background: url(<s:url value='/images/gray_bg.png'/>) 0 0 repeat-y #F6F6F6;
		}
	</style>
	
    <script type="text/javascript" >
   	/*  	$(document).ready(function(){
    		$("#form1").validationEngine();
    	}); */
    
		function reloadVerifyCode()
		{
			$("#verifyImage").attr("src","<s:url value='/getVerifyCode'/>?random="+Math.random());
		}
		 
		$(document).ready(function(){
			
			 $("#userName").blur(function(){
				if($("#userName").val().length<=0){
					 showMessage("span#userNameMessage","red",'请输入用户名！');
					 return false;
				}
				$.ajax({
					    url:'<s:url value='/checkUserName'/>?random="+Math.random()',     
					    type:'post',     
					    data:{'userName':$('#userName').val()},
					    dataType:'json',
					    success:function(data){ 
					    	var aToStr=JSON.stringify(data);
					    	alert(aToStr);
					       if(!data.status){
					    	   showMessage("span#userNameMessage","green",'该名称可以使用！');
					       }else{
					    	   showMessage("span#userNameMessage","red",'该名称已被使用！');
					       }
					    },
					    error:function (XMLHttpRequest, textStatus, errorThrown) {
							
					    }
					});
			    return false;
			  });
			  
			 $("#email").blur(function(){
				 	//检验邮箱格式是否正确
				 	var email = $('#email').val();
				 	var res = checkEmailFormat(email);
				 	if(!res){
				 		return;
				 	} 
				 	
				 	$.ajax({
					    url:'<s:url value='/checkEmail'/>?random="+Math.random()',     
					    type:'post',     
					    data:{'email':$('#email').val()},
					    dataType:'json',
					    success:function(data){  
					    	var aToStr=JSON.stringify(data);
					    	alert(aToStr);
					       if(!data.status){
					    	   showMessage("span#emailMessage","green",'该邮箱可以使用！');
					       }else{
					    	   showMessage("span#emailMessage","red",'该邮箱已被注册！');
					       }
					    },
					    error:function (XMLHttpRequest, textStatus, errorThrown) {
							/* alert(XMLHttpRequest.status);
							alert(textStatus);
							alert(errorThrown);
					         // 通常情况下textStatus和errorThown只有其中一个有值 
					         this; // the options for this ajax request */
					     }
					});
			 });
			  
			 $("#passWord").blur(function(){
					var passWord = $("#passWord").val();
					if(passWord.length<=0){
						showMessage("span#passowrd1Message","red",'请输入密码！');
						return false;
					}else{
						showMessage("span#passowrd1Message","red",'');
					}
			 });
			 
			 $("#passWord2").blur(function(){
					var passWord = $("#passWord").val();
					var passWord2 = $("#passWord2").val();
					if(passWord.length<=0){
						return ;
					}
					if(passWord==passWord2){
						showMessage("span#passowrdMessage","green",'√');
						return true;
					}else{
						showMessage("span#passowrdMessage","red",'两次密码不一致！');
						
						return false;
					}
				  });
			});
		
			
		function checkEmailFormat(email){
			if(email.length>0){
				var emailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if(!email.match(emailReg)){
					showMessage("span#emailMessage","red",'Emial格式不正确！');
					return false;
				}
				return true;
			}else{
				showMessage("span#emailMessage","red",'必须输入Email地址！');
				return false;
			}
		}
		
		function checkVerifyCode(){
			var verifyCode =  $("#verifyCode").val();
			
			if(verifyCode.length>0){
				
				return true;
			}else{
				return false;
			}
			
			
		}
		function showMessage(selector,color,message){
			$(selector).css("color",color);
		    $(selector).html(message);
		}
	</script>

</head>
<body>

	<div class="rounded table">
	
			<div class="attention rounded">
	       		
						<form id="form1" action="<s:url value='/regist'/>" method="post">
                            <table class="table table-bordered table-striped" align="center"  style="width: 450px;">
                                   <tr>
                                        <td width="100">
                                        	<span>
                                        	用户名：
                                        	</span>
                                        </td>
										<td>
                                        	<input type="text" id="userName" name="userName"  class="input-xlarge"  value="" />
                                        	<!-- onblur="checkUserName(value)" -->
                                        </td>
                                        <td width="200">
                                        	<span id="userNameMessage">
                                        	</span>
                                        </td>
										<td>
                                    </tr>
                                    
                                    <tr>
                                        <td>
                                        	<span>
                                        	电子邮箱:
                                        	</span>
                                        </td>
										<td>
                                        	<input type="text" id="email" name="email"  class="input-xlarge"  value="" onblur="checkEmail(value)"/>
                                        </td>
                                        <td>
                                        	<span id="emailMessage">
                                        	</span>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td width="100">
                                        	<span>
                                        	密       码:
                                        	</span>
                                        </td>
										<td width="150">
                                        	<input type="password" id="passWord" name="passWord"  class="input-xlarge"  value="" />
                                        </td>
                                        <td width="200">
                                        	<span id="passowrd1Message">
                                        	</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="100">
                                        	<span>
                                        	密码确认:
                                        	</span>
                                        </td>
										<td>
                                        	<input type="password" id="passWord2" name="passWord2" width=""  class="input-xlarge"  value="" />
                                        </td>
                                         <td width="200">
                                        	<span id="passowrdMessage">
                                        	</span>
                                        </td>
                                    </tr>
                                      <tr>
                                        <td width="100">
                                        	<span>
                                        	验证码:
                                        	</span>
                                        </td>
										<td width="220">
                                        	<input type="text" id="verifyCode" name="verifyCode" size="5" maxlength="5" class="code_box"/>
                                       <!--  </td>	
                                        <td> -->
											<img id="verifyImage"  src="<s:url value='/getVerifyCode'/>"  align="middle" style="cursor:pointer;"  onclick="reloadVerifyCode();" title="点击更换验证码" alt="看不清，换一张" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" >
                                        	<button class="btn btn-primary" type="submit" onclick="return checkVerifyCode();">立即注册</button>
                                        </td>
                                    </tr>
				
                            </table>
                            </form>

			</div>
	 
	
	</div>

	<%@ include file="bottom.jsp" %>
	
</body>
</html>